<template>
    <div>
        <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body>
            <div class="filter-container">
                <el-form inline>
                    <el-form-item label="名称">
                        <el-input v-model="searchQuery.name" placeholder="请输入课程名称" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                    </el-form-item>
                    <el-form-item v-if="multiple && selectedCourses.length > 0" style="float:right;">
                        <el-button type="danger" icon="el-icon-circle-check" @click="select(selectedCourses)">确定选择</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table-container">
                <el-table :data="pageInfo.data" border fit highlight-current-row header-cell-class-name="table-header" @selection-change="handleSelectionChange">
                    <el-table-column prop="id" label="ID" width="70" />
                    <el-table-column prop="name" label="名称" />
                    <el-table-column v-if="!multiple" label="操作" width="180" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini" @click="select(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="multiple" type="selection" width="55" />
                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination
                    v-show="pageInfo.total > 0"
                    :total="pageInfo.total"
                    :page.sync="pageInfo.current_page"
                    :page-size.sync="pageInfo.per_page"
                    @current-change="search"
                />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import courseApi from '@/api/course' // 假设你有一个名为studentApi的API模块来处理学生相关的请求

export default {
    name: 'SelectCourse',
    props: {
        multiple: {
            type: Boolean,
            default: false
        },
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            searchQuery: {
                name: ''
            },
            pageInfo: {
                total: 0,
                current_page: 1,
                per_page: 20,
                data: []
            },
            selectedCourses: []
        }
    },
    watch: {
        visible(val) {
            this.dialogVisible = val // 确保dialogVisible与父组件的visible同步
        },
        dialogVisible(val) {
            this.$emit('update:visible', val)
            if (val) {
                this.search()
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        search(page = 1, perPage = 20) {
            // 在这里编写搜索逻辑
            this.current_page = page
            this.per_page = perPage
            this.getList()
        },
        getList() {
            const query = { ...this.searchQuery, page: this.current_page, per_page: this.per_page }
            courseApi.page(query).then(response => {
                this.pageInfo = response.data
            })
        },
        select(course) {
            // this.$emit('input', student.name) // 触发父组件的select事件，并传递学生信息
            this.$emit('select', course)
            this.dialogVisible = false // 关闭对话框
        },
        handleSelectionChange(courses) {
            this.selectedCourses = courses
        }
    }

}
</script>
